import React from 'react'

class B extends React.Component {
    constructor() {
        super()
        this.state = {
            foo: 1234
        }
    }

    componentWillMount () {
        console.dir('componentWillMount B')
    }

    componentDidMount() {
        console.dir('componentDidMount B')
    }

    componentWillReceiveProps() {
        console.dir('componentWillReceiveProps')
    }

    // 这里面不能调用 setState
    shouldComponentUpdate() {
        console.dir('shouldComponentUpdate')
        return true;
    }

    // 这里面不能调用 setState
    componentWillUpdate () {
        console.dir('componentWillUpdate')
    }

    // 这里面不能调用 setState
    componentDidUpdate() {
        console.dir('componentDidUpdate')
    }

    // 这里面也不能调用 setState
    componentWillUnmount() {
        console.dir('componentWillUnmount')
    }

    changeFoo = () => {
        this.setState({
            foo: 4321,
        })
    }

    // props 和 state 修改时，就差一个，componentWillReceiveProps 回调
    render () {
        return (
            <span>{this.props.name}, foo: {this.state.foo}, <span onClick={this.changeFoo}>changeFoo</span>, </span>
        )
    }
}

export default B;
